<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image2code</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>

        let accumulatedHtml = ''; // 初始化累积的HTML
        let iframe, base64String ;

        function receiveHtmlChar(char) {
            accumulatedHtml += char; // 将新字符追加到累积的HTML中
            if (accumulatedHtml.endsWith('>')) {
                updateIframeContent();
            }
        }
        // 更新iframe中的HTML内容
        function updateIframeContent() {
            // 由于直接操作 DOM 可能导致重绘和性能问题，此处我们更新整个文档内容
            var doc;

            if (iframe.contentDocument) {
                doc = iframe.contentDocument; // For NS6
            } else if (iframe.contentWindow) {
                doc = iframe.contentWindow.document; // For IE5.5 and IE6
            }
            doc.open();
            doc.write(accumulatedHtml ); // 确保文档结构完整
            $("#textarea").text(accumulatedHtml);
            doc.close();
        }

        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const host = window.location.host; // 包括域名和端口（如果有）

        // 构建WebSocket的URL
        const wsUrl = `${protocol}//${host}/ws`;

        // 创建WebSocket连接
        const socket = new WebSocket(wsUrl);


        // 当连接成功建立的回调函数
        socket.onopen = function(event) {
            console.log('连接已开启：', event);
            // 你可以在这里发送消息给服务器
            // socket.send('你好，服务器！');
        };

        // 监听接收到的消息
        socket.onmessage = function(event) {
            // console.log('接收到消息：', event.data);
            receiveHtmlChar( event.data)
        };

        // 监听错误事件
        socket.onerror = function(event) {
            console.error('WebSocket错误：', event);
        };

        // 监听连接关闭事件
        socket.onclose = function(event) {
            console.log('连接已关闭：', event);
        };


        function sendName() {
            const apiKey = $("#apiKey").val();
            // 创建一个对象
            const obj = {
                base64String: base64String,
                apiKey: apiKey
            };
            const jsonString = JSON.stringify(obj);
            socket.send(jsonString);

        }


        $(function (){
            iframe = document.getElementById('preview');

            document.getElementById('fileInput').addEventListener('change', function() {
                var file = this.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(event) {
                        base64String = event.target.result;
                        // console.log(base64String)
                    };
                    reader.readAsDataURL(file);


                    var imgUrl = URL.createObjectURL(file);
                    document.getElementById('imagePreview').src = imgUrl;
                    // 当图片不再需要显示时，释放内存中的URL对象
                    document.getElementById('imagePreview').onload = function() {
                        URL.revokeObjectURL(imgUrl);
                    };

                }
            });

            $("button").click(function (){

                sendName();

            });
        });
    </script>

    <style>
        #preview {
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<input type="text" id="apiKey"  >
<input type="file" id="fileInput" accept="image/*" >
<img id="imagePreview" style="width: 500px" src="" alt="Image preview...">

<button>ok</button>
<iframe id="preview"></iframe>

</body>
</html>
